<template>
  <div style="text-align:center">
    <load-more tip="超级大乐透游戏" :show-loading="false" background-color="#fbf9fe"></load-more>
    <div style="padding:0 15px">
      <x-table>
        <thead>
        <tr style="background-color:#49AEF1">
          <th>信息统计</th>
          <th>销量(元)</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td><p style="color:#787878; font-size:14px;">超级大乐透</p></td>
          <td><p style="color:#787878; font-size:14px;">10</p></td>
        </tr>
        </tbody>
      </x-table>
    </div>
    <load-more tip="超级大乐透游戏大额中奖" :show-loading="false" background-color="#fbf9fe"></load-more>
    <div class="chart-wrapper" >
      <canvas id="dlt_mountNode3"></canvas>
    </div>
    <load-more tip="超级大乐透游戏销量" :show-loading="false" background-color="#fbf9fe"></load-more>
    <canvas id="dlt_myChart" :width="width" height="250"></canvas>

    <load-more tip="超级大乐透游戏返奖率" :show-loading="false" background-color="#fbf9fe"></load-more>
    <div class="chart-wrapper" >
      <canvas id="dlt_mountNode"></canvas>
    </div>
  </div>
</template>

<script>
  import {XTable, LoadMore} from 'vux'

  let F2 = require('@antv/f2')

  export default {
    components: {
      XTable,
      LoadMore
    },
    mounted () {
      this.setChart()
      this.setChart1()
      this.setChart3()
    },
    methods: {
      setChart () {
        // F2 对数据源格式的要求， 仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
        const data = [
          {genre: 'Sports', sold: 275},
          {genre: 'Strategy', sold: 115},
          {genre: 'Action', sold: 120},
          {genre: 'Shooter', sold: 350},
          {genre: 'Other', sold: 150}
        ]

        // Step 1: 创建 Chart 对象
        const chart = new F2.Chart({
          id: 'dlt_myChart',
          // 指定分辨率
          pixelRatio: window.devicePixelRatio
        })

        // Step 2: 载入数据源
        chart.source(data)

        // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
        chart.interval().position('genre*sold').color('genre')

        // Step 4: 渲染图表
        chart.render()
      },
      setChart1 () {
        // 使用 html5 canvas api 创建渐变色对象
        const canvas = document.getElementById('mountNode')
        const ctx = canvas.getContext('2d')
        const gradient = ctx.createLinearGradient(0, 0, window.innerWidth, 0)
        gradient.addColorStop(0, '#F2C587')
        gradient.addColorStop(0.5, '#ED7973')
        gradient.addColorStop(1, '#8659AF')

        const data = [
          { year: 2000, age: 27.2 },
          { year: 2001, age: 27.5 },
          { year: 2002, age: 27.8 },
          { year: 2003, age: 28 },
          { year: 2004, age: 28.2 },
          { year: 2005, age: 28.4 },
          { year: 2006, age: 28.8 },
          { year: 2007, age: 28.8 },
          { year: 2008, age: 28.8 },
          { year: 2009, age: 28.8 },
          { year: 2010, age: 28.9 },
          { year: 2011, age: 29 },
          { year: 2012, age: 29.3 },
          { year: 2013, age: 29.4 },
          { year: 2014, age: 29.5 },
          { year: 2015, age: 29.7 },
          { year: 2016, age: 30 },
          { year: 2017, age: 30.12 }
        ]
        const chart = new F2.Chart({
          id: 'dlt_mountNode',
          width: window.innerWidth,
          height: window.innerWidth > window.innerHeight ? (window.innerHeight - 54) : window.innerWidth * 0.707,
          pixelRatio: window.devicePixelRatio
        })
        const defs = {
          year: {
            range: [ 0, 1 ],
            max: 2020
          },
          age: {
            tickCount: 5
          }
        }
        chart.axis('year', {
          label (text, index, total) {
            const cfg = {
              textAlign: 'center'
            }
            if (index === 0) {
              cfg.textAlign = 'start'
            }
            if (index > 0 && index === total - 1) {
              cfg.textAlign = 'end'
            }
            return cfg
          }
        })
        chart.source(data, defs)
        chart.tooltip({
          showCrosshairs: true
        })
        chart.guide().tag({
          position: [ 2017, 30.12 ],
          content: '30.12',
          direct: 'tl',
          offsetY: -5,
          background: {
            fill: '#8659AF'
          },
          pointStyle: {
            fill: '#8659AF'
          }
        })
        chart.line().position('year*age')
          .shape('smooth')
          .color(gradient)
        chart.area().position('year*age')
          .shape('smooth')
          .color(gradient)
        chart.render()
      },
      setChart3 () {
        const data = [
          { time: 'Jan.', tem: 1000 },
          { time: 'Feb.', tem: 2200 },
          { time: 'Mar.', tem: 2000 },
          { time: 'Apr.', tem: 2600 },
          { time: 'May.', tem: 2000 },
          { time: 'Jun.', tem: 2600 },
          { time: 'Jul.', tem: 2800 },
          { time: 'Aug.', tem: 2000 }
        ]
        const chart = new F2.Chart({
          id: 'dlt_mountNode3',
          width: window.innerWidth,
          height: window.innerWidth > window.innerHeight ? (window.innerHeight - 54) : window.innerWidth * 0.707,
          pixelRatio: window.devicePixelRatio
        })

        chart.source(data)
        chart.tooltip({
          showCrosshairs: true
        })
        chart.scale({
          time: {
            range: [ 0, 1 ]
          },
          tem: {
            tickCount: 5,
            min: 0
          }
        })
        chart.axis('time', {
          label (text, index, total) {
            const textCfg = {}
            if (index === 0) {
              textCfg.textAlign = 'left'
            }
            if (index === total - 1) {
              textCfg.textAlign = 'right'
            }
            return textCfg
          }
        })
        chart.area().position('time*tem')
        chart.line().position('time*tem')
        chart.render()
      }
    },
    data () {
      return {
        width: window.screen.width * 0.8
      }
    }
  }
</script>
